<template>
  <div>
    <div style="box-sizing:border-box;height: 6vh;padding: 0 20px;">
      <my-search-form :formFields="searchFields" @search="handleSearch" @clear="handleClear"></my-search-form>
    </div>
    <my-divider>
      <span style="color:#409EFF;">{{pageTitle}}</span>
    </my-divider>
    <div v-loading="loading"  style="height: 73vh;overflow-y: auto" @click.right.prevent="openMenu($event)">
      <div class="_folder" @dblclick="handleSuperior" @click.right.prevent.stop="" v-show="parent != null">
        <svg-icon name="out_folder" size="70px"></svg-icon>
        <div>上级目录</div>
      </div>
      <div class="_folder" v-for="(item,i) in dataSouse" :key="i">
        <div v-if="item.type == 1" @dblclick="folderClick(item)" @click.right.prevent.stop="">
          <svg-icon name="folder" size="80px"></svg-icon>
          <div :title="item.title">{{item.title}}</div>
        </div>
        <div v-else @click="videoClick(item.id)" @click.right.prevent.stop="">
          <div style="box-sizing: border-box;width: 100px;height: 84px;">
            <img style="margin:8px 0;border-radius: 5px" width="100px" height="64px" :src="item.projectFile.videoPic"/>
          </div>
          <div :title="item.title" style="height: 16px;text-align: center;">{{item.projectFile.name}}</div>
        </div>
      </div>
      <my-empty v-if="dataSouse.length == 0"></my-empty>
    </div>
    <!-- dialog弹窗 -->
    <transition name="el-zoom-in-center">
      <my-dialog
        :loading="saveLoading"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        :title="dialogTitle"
        :saveDisabled="saveDisabled"
        width="30%"
        destroy-on-close
        @save="saveEntity"
        @close="handleClose">
        <my-edit-form
          v-if="dialogVisible"
          :formFields="editFields"
          :data="editData"
          ref="editForm"
          @upload="saveDisabled = true"
          @success="saveDisabled = false"
        ></my-edit-form>
      </my-dialog>
    </transition>
    <!-- 右键弹窗 -->
    <transition name="el-zoom-in-center">
      <ul v-show="menuVisible" :style="{left:left+'px',top:top+'px'}" class="_contextmenu">
        <li @click="handleCreate">新建目录</li>
        <li @click="handleUpload">上传视频</li>
      </ul>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "video-index",
    data(){
      return{
        dataSouse: [],
        loading: false,
        saveLoading: false,
        pageTitle: '视频列表',
        dialogTitle: '新增',
        dialogVisible: false,
        menuVisible: false,
        left: 0,
        top: 0,
        searchFields: [
          {
            type: 'input',
            label: '名称',
            prop: 'name'
          },
        ],
        searchParams: {},
        searchUrl: '/api/study/video/getVideoList',
        parent: null,
        editFields: [
          {
            type: 'input',
            label: '名称',
            prop: 'title',
            rules:{ required: true, message: '名称不能为空', trigger: 'blur' }
          }
        ],
        editData: null,
        saveUrl: '/api/study/video/saveVideo',
        deleteUrl: '/api/study/video/deleteVideo',
        videoType: 0,
        saveDisabled: false,
      }
    },
    methods:{
      /** 初始化 **/
      loadData(){
        this.loading = true;
        let param = { ...this.searchParams,parentId: (this.parent?this.parent.id:null) }
        this.$ajax.requestCommonPost(this.searchUrl,param).then(res=>{
          this.dataSouse = res;
        }).finally(()=>{
          this.loading = false;
        })
      },
      /** 查询按钮点击 **/
      handleSearch(param){
        this.searchParams = param;
        this.loadData();
      },
      /** 清空按钮点击 **/
      handleClear(){
        this.parent = null;
        this.loadData();
      },
      /** 新增目录 **/
      handleCreate(){
        this.dialogTitle = '新增目录';
        this.data = {};
        this.videoType = 1;
        this.editFields = [{
          type: 'input',
          label: '名称',
          prop: 'title',
          rules:{ required: true, message: '名称不能为空', trigger: 'blur' }
        }];
        this.dialogVisible = true;
      },
      /** 上传 **/
      handleUpload(){
        this.videoType = 2;
        this.dialogTitle = '上传视频';
        this.data = {};
        this.editFields = [{
          type: 'upload',
          label: '文件',
          prop: 'fileId',
          accept: '.mp4'
        }];
        this.dialogVisible = true;
      },
      /** 关闭按钮点击 **/
      handleClose(){
        this.dialogVisible = false;
      },
      /** 上级目录点击 **/
      handleSuperior(){
        if(this.parent == null || this.parent.parentId == null){
          this.parent = null;
          this.loadData();
        }else{
          this.$ajax.getVideoById(this.parent.parentId).then(res=>{
            this.parent = res;
            this.loadData();
          });
        }
      },
      /** 文件夹点击 **/
      folderClick(item){
        if(item.type == 1){
          this.parent = item;
          this.loadData();
        }
      },
      /** 视频点击 **/
      videoClick(id){
        this.$router.push({path: `/play/${id}`})
      },
      /** 右键菜单 **/
      openMenu(e){
        const menuMinWidth = 100;
        const offsetWidth = document.body.clientWidth;  // 页面最大宽度
        const maxLeft = offsetWidth - menuMinWidth;  // left boundary
        const left = e.x + 15;  // 15: margin right
        if (left > maxLeft) {
          this.left = maxLeft
        } else {
          this.left = left
        }
        this.top = e.clientY;
        this.menuVisible = true;
      },
      closeMenu(){
        this.menuVisible = false;
      },
      /** 保存 **/
      saveEntity(){
        this.saveLoading = true;
        this.$refs.editForm.validate((res)=>{
          if(res){
            this.$ajax.requestCommonPost(this.saveUrl,{...res,parentId: this.parent?this.parent.id: null,type: this.videoType}).then(r=>{
              if(this.dialogTitle === '编辑'){
                this.$message.success('编辑成功');
              }else {
                this.$message.success('新增成功');
              }
              this.handleClose();
              this.loadData();
            }).finally(()=>{
              this.saveLoading = false;
            })
          }else{
            this.saveLoading = false;
            return;
          }
        });
      }
    },
    mounted() {
      this.loadData();
    },
    watch:{
      /** 控制右键窗口关闭 **/
      menuVisible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ._folder{
    width: 100px;
    text-align: center;
    display: inline-block;
    margin: 10px;
    color: grey;
    &:hover{
      color: #409EFF !important;
    }
    div{
      width: 100%;
      text-align: center;
      font-size: 12px;
      white-space: nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
    }
  }
  ._contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
</style>
